<template>
  <div class="user-box con-top">
    <el-card class="box-card">
      <div class="header">
        <div class="left">
          <el-icon><Search /></el-icon>
          <span>筛选搜索</span>
        </div>
        <div class="right">
          <el-button type="default" @click="searchParams.keyword = ''">
            重置
          </el-button>
          <el-button type="primary" @click="search">查询搜索</el-button>
        </div>
      </div>
      <div class="container">
        <span>账号/姓名：</span>
        <el-input
          placeholder="请输入账号、姓名"
          v-model="searchParams.keyword"
          @keyup.enter="search"
        />
      </div>
    </el-card>

    <el-card class="box-two">
      <div class="left">
        <el-icon><Tickets /></el-icon>
        <span>数据列表</span>
      </div>
      <el-button
        type="primary"
        @click="dialogVisible = true"
        v-permission="'addUser'"
      >
        添加
      </el-button>
      <!-- 对话框 -->
      <EditUser :isShow="dialogVisible" @defaultFn="resetFn" :id="userId" />
      <!-- 对话框 -->
    </el-card>

    <!-- 表格渲染 -->
    <div class="box-table">
      <el-table
        :data="tableData"
        style="width: 100%;"
        table-layout="auto"
        border
      >
        <el-table-column align="center" prop="id" label="编号" />
        <el-table-column align="center" prop="nickName" label="账号" />
        <el-table-column align="center" prop="username" label="姓名" />
        <el-table-column align="center" prop="email" label="邮箱" />
        <el-table-column align="center" prop="createTime" label="添加时间">
          <template #default="{row}">{{ formatDate(row.createTime) }}</template>
        </el-table-column>
        <el-table-column align="center" prop="loginTime" label="最后登录">
          <template #default="{row}">{{ formatDate(row.loginTime) }}</template>
        </el-table-column>
        <el-table-column align="center" label="是否启用">
          <template #default="{row}">
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
              @change="changeUserStatus(row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template #default="{row}">
            <el-button
              text
              type="primary"
              @click="showAllRole(row.id)"
              v-permission="'allocRole'"
            >
              分配角色
            </el-button>
            <el-button
              text
              type="primary"
              @click="editUser(row.id)"
              v-permission="'editUser'"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页功能 -->
      <ElConfigProvider :locale="zhCn">
        <el-pagination
          v-model:current-page="searchParams.pageNum"
          v-model:page-size="searchParams.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="search"
          @current-change="search"
        />
      </ElConfigProvider>
      <!-- 分页功能 -->
    </div>
    <!-- 表格渲染 -->
  </div>

  <!-- 分配角色 -->
  <AllocRole :isShow="dialogVisibleUser" :id="allocRoleId" @close="close" />
</template>
<script setup lang="ts">
import { Search, Tickets } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import { ApiUserList, ApiUpdateStatus } from './api/index'
import { ElMessage } from 'element-plus'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { formatDate } from '@/utils/index'
import EditUser from './editUser.vue'
import AllocRole from './allocRole.vue'

// 用户列表
const tableData = ref<IList[]>([])

// 总页数
const total = ref<number>(0)

// 搜索框查询参数
const searchParams = reactive<IUserParams>({
  keyword: '',
  pageNum: 1,
  pageSize: 10,
})

// 动态绑定用户id
const userId = ref(0)

// 添加用户对话框显示隐藏
const dialogVisible = ref(false)

// 分配角色对话框显示隐藏
const dialogVisibleUser = ref(false)

const allocRoleId = ref(0)

// 分配角色按钮
const showAllRole = (id: number) => {
  dialogVisibleUser.value = true
  allocRoleId.value = id
}

// 角色分配对话框恢复默认
const close = () => {
  dialogVisibleUser.value = false
  allocRoleId.value = 0
}

// 查询请求
const search = () => {
  // toggleDark()
  // console.log(toggleDark())
  ApiUserList(searchParams).then((res) => {
    if (res.code === 200) {
      tableData.value = res.data.list
      total.value = res.data.total
    }
  })
}

// 更改用户状态
const changeUserStatus = (row: IList) => {
  ApiUpdateStatus(row.id as number, row.status as number)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success(res.message)
      } else {
        // 业务失败处理
        row.status = row.status === 1 ? 0 : 1
      }
    }) // 网络请求 失败处理
    .catch(() => {
      row.status = row.status === 1 ? 0 : 1
    })
}

// 恢复默认值
const resetFn = (isTrue?: boolean) => {
  dialogVisible.value = false
  userId.value = 0
  if (isTrue) {
    search()
  }
}

// 编辑按钮
const editUser = (id: number) => {
  userId.value = id
  dialogVisible.value = true
}

// 打开网页先请求一次
search()
</script>
<style lang="less" scoped>
.user-box {
  .box-card {
    margin-top: 20px;
    .header {
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        span {
          margin-left: 10px;
          font-size: 14px;
        }
      }
      .right {
        display: flex;
        .el-button--default {
          margin-right: 5px;
        }
      }
    }
    .container {
      display: flex;
      padding-top: 20px;
      padding-left: 40px;
      align-items: center;
      .el-input {
        width: 190px;
      }
    }
  }
  .box-two {
    margin: 20px 0;

    .left {
      display: flex;
      align-items: center;
      span {
        margin-left: 10px;
        font-size: 14px;
      }
    }
    :deep(.el-card__body) {
      display: flex;
      justify-content: space-between;
    }
  }
  .box-table {
    :deep(.el-pagination) {
      margin-top: 20px;
      float: right;
    }
  }
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
